<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Google Cardboard Prototype - NWChinn</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="author" content="Nick Chinn">
        <meta name="description" content="Google Cardboard Panaramic Photo Viewer, made with threeJS. Refresh the page to see a different photo.">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                margin: 0px;
                overflow: hidden;
            }
            #example {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
        </style>
    </head>
    
    <body>
    <div id="example"></div>

    <script src="js/third-party/threejs/three.js"></script>
    <script src="js/third-party/threejs/StereoEffect.js"></script>
    <script src="js/third-party/threejs/DeviceOrientationControls.js"></script>
    <script src="js/third-party/threejs/OrbitControls.js"></script>

    <script>
    var camera, scene, renderer;
    var effect, controls;
    var element, container;

    var clock = new THREE.Clock();

    // panoramas background (Turn random photos on and off below)
    var panoramasArray = ["01.jpg","02.jpg","03.jpg","04.jpg","05.jpg","06.jpg"];
    //var panoramasArray = ["01.jpg","01.jpg","01.jpg","01.jpg","01.jpg","01.jpg"];
    //var panoramasArray = ["06.jpg","06.jpg","06.jpg","06.jpg","06.jpg","06.jpg"];
    var panoramaNumber = Math.floor(Math.random()*panoramasArray.length);

    init();
    animate();

    function init() {
  		renderer = new THREE.WebGLRenderer({ clearAlpha: 1, alpha:true });
  		//Used in 360 code but might not be necessary
  		renderer.setSize(window.innerWidth, window.innerHeight);
  		element = renderer.domElement;
  		container = document.getElementById('example');
  		container.appendChild(element);

  		// This creates the stereoscopic vision for google cardboard headsets (4)
  		effect = new THREE.StereoEffect(renderer);

  		//Creating the scene
  		scene = new THREE.Scene();

  		//Creating and adding the camera
  		camera = new THREE.PerspectiveCamera(90, 1, 0.001, 700);
  		camera.position.set(0, 10, 0);
  		scene.add(camera);

  		// creation of a big sphere geometry
  		var sphere = new THREE.SphereGeometry(100, 100, 40);
  		sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));

  		// creation of the sphere material
  		var sphereMaterial = new THREE.MeshBasicMaterial();
  		sphereMaterial.map = THREE.ImageUtils.loadTexture(panoramasArray[panoramaNumber])

  		// geometry + material = mesh (actual object)
  		var sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
  		scene.add(sphereMesh);

      // Code below adds cube to viewer
  		// var geometry = new THREE.BoxGeometry( 2, 3, 1 );
  		// var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  		// var cube = new THREE.Mesh( geometry, sphereMaterial );
  		// cube.position.set(5,0,0)
  		// scene.add( cube );

  		controls = new THREE.OrbitControls(camera, element);
  		controls.rotateUp(Math.PI / 4);
  		controls.target.set(
  			camera.position.x + 0.1,
  			camera.position.y,
  			camera.position.z
  		);
  		controls.noZoom = true;
  		controls.noPan = true;

  		function setOrientationControls(e) {
  			if (!e.alpha) {
  			  return;
  			}

  			controls = new THREE.DeviceOrientationControls(camera, true);
  			controls.connect();
  			controls.update();

  			element.addEventListener('click', fullscreen, false);

  			window.removeEventListener('deviceorientation', setOrientationControls, true);
  		}

  		window.addEventListener('deviceorientation', setOrientationControls, true);


  		var light = new THREE.HemisphereLight(0x777777, 0x000000, 0.6);
  		scene.add(light);

  		var planeMaterial = new THREE.MeshBasicMaterial({transparent: true});
  		planeMaterial.map = THREE.ImageUtils.loadTexture("eyeLogo.png");

  		var geometry = new THREE.PlaneGeometry(7, 8);

  		var mesh = new THREE.Mesh(geometry, planeMaterial);

  		mesh.rotation.x = -Math.PI / 2;
  		scene.add(mesh);

  		window.addEventListener('resize', resize, false);
  		setTimeout(resize, 1);
    }

    function resize() {
        var width = container.offsetWidth;
        var height = container.offsetHeight;

        camera.aspect = width / height;
        camera.updateProjectionMatrix();

        renderer.setSize(width, height);
        effect.setSize(width, height);
    }

    function update(dt) {
        resize();

        camera.updateProjectionMatrix();

        controls.update(dt);
    }

    function render(dt) {
        effect.render(scene, camera);
    }

    function animate(t) {
        requestAnimationFrame(animate);

        update(clock.getDelta());
        render(clock.getDelta());
    }

    function fullscreen() {
        if (container.requestFullscreen) {
            container.requestFullscreen();
        } else if (container.msRequestFullscreen) {
            container.msRequestFullscreen();
        } else if (container.mozRequestFullScreen) {
            container.mozRequestFullScreen();
        } else if (container.webkitRequestFullscreen) {
            container.webkitRequestFullscreen();
        }
    }  
  </script>
  </body>
</html>
